<template>
  <transition name="fade">
    <div v-show="visible" :style="{top: top + 'px'}" :class="['Message',type]">{{message}}</div>
  </transition>
</template>
<script setup>
  import {reactive,toRefs} from "vue"
  const props = defineProps({
    message: {
      type: String,
    },
    type: {
      type: String,
      default: "info"
    }
  })

  const state = reactive({
    visible: false,
    height: 41,
    marginTop: 20,
    top: 0
  })
  const setVisible = (visible) => {
    state.visible = visible
    return new Promise(resolve => {
      setTimeout(_=>{
        resolve()
      },300)
    })
  }
  const setTop = (len) => {
    state.top = len * (state.height + state.marginTop) - state.height
  }
  defineExpose({
    setVisible,
    setTop
  })

  const {visible,top} = toRefs(state)
</script>
<style scoped>
.Message{
  width: 400px;
  padding:10px 16px;
  box-sizing: border-box;
  color: #ffffff;
  font-size: 16px;
  position: fixed;
  left: 50%;
  margin-left: -200px;
  border-radius: 4px;
  z-index: 2022;
  transition: all 0.3s;
}
.info {
  border:1px solid #f0f9eb ;
  background: #edf2fc;
  color: #909399;
}
.success {
  border:1px solid #f0f9eb ;
  background: #e1f3d8;
  color: #67C23A;
}
.warning {
  border:1px solid #faecd8 ;
  background: #fdf6ec;
  color: #e6a23c;
}
.error {
  border:1px solid #fde2e2 ;
  background: #fef0f0;
  color: #F56C6C;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}

.fade-enter-to,
.fade-leave-from {
  opacity: 1;
  transform: translateY(0);
}

.fade-enter-active {
  transition: all 0.3s ease-out;
}
.fade-leave-active {
  transition: all 0.3s ease-in;
}
</style>